<div class="nzSegment">
    <div class="filter">
        <div class="rightFloat">
            <input nz-input type="text" [(ngModel)]="filter" placeholder="Search...">
        </div>
    </div>
    <ul>
        <li *ngFor="let v of filteredVulnerabilities; let i = index" [class.inactive]="v.ignored">
            <div class="header">
                <nz-tag *ngIf="v.ignored">Ignored</nz-tag>
                <div class="dot {{v.severity}}"></div>
                <div class="text">
                    <span class="component">{{ ' ' + v.component}}</span>
                    <span>{{ ' ' + v.version}}</span>
                    <span class="title">{{ v.title + ' '}}<a [href]="v.link" target="_blank">{{v.cve}}
                        <span nz-icon nzType="link" nzTheme="outline"></span></a></span>
                </div>
                <nz-tag *ngIf="v.type" nzColor="volcano">{{v.type}}</nz-tag>
                <div class="action" *ngIf="edit">
                    <button nz-button nzSize="small" (click)="ignoreVulnerability(i)" [class.loading]="v.loading"
                        [class.disabled]="v.loading">
                        <span nz-icon nzType="undo" nzTheme="outline" *ngIf="v.ignored"></span>
                        <span *ngIf="!v.ignored" nz-icon nzType="eye-invisible" nzTheme="outline"
                              title="{{ 'vulnerability_ignore' | translate }}"></span>
                    </button>
                </div>
            </div>
            <div class="resume" *ngIf="!v.ignored">
                <div class="description">
                    <markdown [data]="v.description"></markdown>
                </div>
                <a class="pointing" (click)="showMore = !showMore">
                    <span *ngIf="showMore">{{ 'vunerability_hide' | translate }}</span>
                    <span *ngIf="!showMore">{{ 'vulnerability_showmore' | translate }}</span>
                </a>
                <div class="more" *ngIf="showMore">
                    <div class="origin">
                        <h4>{{ 'vulnerability_origin' | translate }}</h4>
                        <pre>{{v.origin}}</pre>
                    </div>
                    <div class="fixin">
                        <h4>{{ 'vulnerability_fixin' | translate }}</h4>
                        <pre>{{v.fix_in}}</pre>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
